<template>
	<view>
		<view class="page">
		    <view class="left" ref="left">
		      <image class="image" v-for="(item,i) in leftList" :key="i" :src="item.image" mode="widthFix" @click="doPreviewImage(item.type)"></image>
		    </view>
		    <view class="right" ref="right">
		      <image class="image" v-for="(item,i) in rightList" :key="i" :src="item.image" mode="widthFix" @click="doPreviewImage(item.type)"></image>
		    </view>
		  </view>
	</view>
</template>
.
<script>
	export default {
		data() {
			return {
				imageList: [
				  this.$IMG_URL + '/uploads/20240628/72ab957abd4820b4d1b98e28fde1fe23.jpg',
				  this.$IMG_URL + '/uploads/20240628/6ebd2e73fc91f154f1f7573507e23562.jpg',
				  this.$IMG_URL + '/uploads/20240628/05bdd49f7ab85c5c86ece732a0bcd836.jpg',
				  this.$IMG_URL + '/uploads/20240628/94000001be5ca4f903fc30947a2569f6.jpg',
				  this.$IMG_URL + '/uploads/20240628/6b6d85052813a9debc0a019ad071c076.jpg',
				  this.$IMG_URL + '/uploads/20240628/096cbb6ab4cea572eef6919a49026d5f.jpg',
				  this.$IMG_URL + '/uploads/20240628/ab88d50d132e7caed813373c62ea4497.jpg',
				  this.$IMG_URL + '/uploads/20240628/5657c93dc929ae3ba61fcb85baaf7aae.jpg',
				  this.$IMG_URL + '/uploads/20240628/384f4e600a046ec0d2eb7cf5939e2535.jpg',
				  this.$IMG_URL + '/uploads/20240628/3c0fb888ac2d15a509476811f9bde7d3.jpg',
				  this.$IMG_URL + '/uploads/20240628/32be91ee975c8a7a409f08b84d739825.jpg',
				  this.$IMG_URL + '/uploads/20240628/2c53e245e5f18edf413553b16961213c.jpg',
				  this.$IMG_URL + '/uploads/20240628/a9198214b9d9ec75accd14871af15e7d.jpg',
				  this.$IMG_URL + '/uploads/20240628/cd090365136b4f58fdb6b245e29fa948.jpg',
				  this.$IMG_URL + '/uploads/20240628/f2bbc17e19405b3a5b8389c5c8ff91b6.jpg',
				  this.$IMG_URL + '/uploads/20240628/b2aef28e175f30cc54ea8a56e9f31d4c.jpg',
				  this.$IMG_URL + '/uploads/20240628/1563b60c8a66a3194ac706533ed3a4a9.jpg',
				  this.$IMG_URL + '/uploads/20240628/ce5f875bfef203e5788462e795959c7b.jpg',
				  this.$IMG_URL + '/uploads/20240628/9b35dc8b731b89dfc6bd3c01fccbe6b6.jpg',
				  this.$IMG_URL + '/uploads/20240628/179c11fc268fe1bfd41579ed2e3d8ca4.jpg',
				  this.$IMG_URL + '/uploads/20240628/b882c12a8a7dfcd39c5b82d82cd84040.jpg',
				  this.$IMG_URL + '/uploads/20240628/bde458c5b0eb97bbcd060138d58fd020.jpg',
				  this.$IMG_URL + '/uploads/20240628/9e451744f0edf7fbd04d6e754d8ba1fd.jpg',
				  this.$IMG_URL + '/uploads/20240628/5cf439cdcf1bbe6403ea9fd3929aac38.jpg',
				  this.$IMG_URL + '/uploads/20240628/8a17bea3e2d9f1ab5e8f831422c68caf.jpg',
				  this.$IMG_URL + '/uploads/20240628/58405081303313ec4d2ea26e4562b1de.jpg',
				  this.$IMG_URL + '/uploads/20240628/8577154714e57c6eb142ecb1032a01be.jpg',
				  this.$IMG_URL + '/uploads/20240628/62fd6d495b9d87f5e608edd737e0b0c4.jpg',
				  this.$IMG_URL + '/uploads/20240628/d91436e13a58cb8a84df3dbe36402419.jpg',
				  this.$IMG_URL +'/uploads/20240628/98d44809193103d69e82633412c6eee9.jpg',
				  this.$IMG_URL + '/uploads/20240628/03af71e65e67c4ffadb77422ba98bc57.jpg',
				  this.$IMG_URL + '/uploads/20240628/7f38626cad9c513caae0dc74fb928a2e.jpg',
				  this.$IMG_URL + '/uploads/20240628/51c6a864c792860b9d6629db80f3e635.jpg'
				], //所有图片
				leftList: [], //左边列图片
				rightList: [], //右边列图片
				leftHeight: 0, //左边列高度
				rightHeight: 0, //右边列高度
				columnWidth: 0 //列宽度
			}
		},
		 mounted() {
		  this.$nextTick(() => {
			   const query = uni.createSelectorQuery().in(this);
				query.select('.left').boundingClientRect(res => {
				  this.columnWidth = res.width
				  //方法
				  this.setWaterFallLayout()
				}).exec()
		  })
		},
		methods: {
			// 预览图片
			doPreviewImage(index){
				uni.previewImage({
					current:index,
					urls:this.imageList
				})
			},
			getImgHeight(url) {
			        return new Promise((resolve, reject) => {
			          uni.getImageInfo({
			            src: url,
			            success: e => {
			              resolve(e.height)
			
			            },
			            fail: e => {
			              reject(e)
			            }
			          })
			        })
			      },
			//通过uni.getImageInfo，小程序支持
			  async setWaterFallLayout() {
				let i = -1;
				for (let item of this.imageList) {
					
				  try {
					
					let h = await this.getImgHeight(item)
					
					if (this.leftHeight <= this.rightHeight) {
						i++
					let m = {
						image:item,
						type:i
					}
					
					  this.leftList.push(m)
					  this.leftHeight += h
					  
					} else {
						i++
						let m = {
							image:item,
							type:i
						}
						
					  this.rightList.push(m)
					  this.rightHeight += h
					}
					
				  } catch (e) {}
				}
			  },
		}
	}
</script>

<style lang="scss">
.page {
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding: 2% 4%;
    box-sizing: border-box;
  }

  .left,
  .right {
    margin: 0 auto;
    width: 48%;
  }

  .image {
	border-radius: 12rpx;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }
  .info{
    width: 100%;
    height: 200rpx;
    background-color: #55aa7f;
  }
</style>
